<template>
  <div>
    <h2>Activity Management</h2>
    <!-- 添加活动表单 -->
    <form @submit.prevent="addActivity">
      <input v-model="newActivity.title" placeholder="Title" required />
      <input v-model="newActivity.description" placeholder="Description" required />
      <input v-model="newActivity.date" type="date" required />
      <input v-model="newActivity.location" placeholder="Location" required />
      <button type="submit">Add Activity</button>
    </form>

    <!-- 活动列表 -->
    <ul>
      <li v-for="activity in activities" :key="activity.id">
        {{ activity.title }} - {{ activity.date }}
        <button @click="editActivity(activity)">Edit</button>
        <button @click="deleteActivity(activity.id)">Delete</button>
      </li>
    </ul>

    <!-- 编辑活动表单 -->
    <form v-if="editingActivity" @submit.prevent="updateActivity">
      <input v-model="editingActivity.title" placeholder="Title" required />
      <input v-model="editingActivity.description" placeholder="Description" required />
      <input v-model="editingActivity.date" type="date" required />
      <input v-model="editingActivity.location" placeholder="Location" required />
      <button type="submit">Update Activity</button>
      <button @click="cancelEdit">Cancel</button>
    </form>
  </div>
</template>

<script>
import activities from '@/data/activities';

export default {
  data() {
    return {
      activities,
      newActivity: {
        title: '',
        description: '',
        date: '',
        location: ''
      },
      editingActivity: null
    };
  },
  methods: {
    addActivity() {
      const newId = this.activities.length + 1;
      this.activities.push({ ...this.newActivity, id: newId });
      this.newActivity = { title: '', description: '', date: '', location: '' };
    },
    editActivity(activity) {
      this.editingActivity = { ...activity };
    },
    updateActivity() {
      const index = this.activities.findIndex(a => a.id === this.editingActivity.id);
      if (index !== -1) {
        this.activities[index] = this.editingActivity;
      }
      this.editingActivity = null;
    },
    deleteActivity(id) {
      this.activities = this.activities.filter(a => a.id !== id);
    },
    cancelEdit() {
      this.editingActivity = null;
    }
  }
};
</script>